<template>
  <div class="app-container">
    <div class="filter-container" v-if="user.status==10">
      <el-button class="filter-item" type="success" @click="handleWechatPay">微信转账</el-button>
      <el-button class="filter-item" type="success" @click="handleBankPay">银行转账</el-button>
      <el-button class="filter-item" type="danger" icon="el-icon-error" @click="handleReject">审核驳回</el-button>
    </div>
    <div>
      <el-row :gutter="24">
        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>
        <el-col :span="18" :xs="24">
          <withdraw-simple-list :userId="user.userInfoId" />
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="24">
        <el-col :span="12" :xs="24">
          <order-list :userId="user.userInfoId" :type=10 title="接单" />
        </el-col>
        <el-col :span="12" :xs="24">
          <order-list :userId="user.userInfoId" :type=20 title="发单"/>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="银行转账" :visible.sync="dialogBankPayVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="bankPayModel"
        label-position="left"
        label-width="100px"
        style="width: 350px; margin-left:20px;"
      >
        <el-form-item label="转账单据" prop="transactionId">
          <el-input v-model="bankPayModel.transactionId" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBankPayVisible = false">取消</el-button>
        <el-button type="primary" @click="submitBankPay()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UserCard from "./component/UserCard";
import OrderList from "./component/OrderList";
import WithdrawSimpleList from "./component/WithdrawSimpleList";
import { drawDetail, updateWithdrawStatus } from "@/api/menu-wallet";

export default {
  name: "Detail",
  components: { UserCard, OrderList, WithdrawSimpleList },
  data() {
    return {
      user: {},
      transactionId: "",
      dialogBankPayVisible: false,
      rules: {
        transactionId: [
          { required: true, message: "转账单据必填", trigger: "blur" }
        ]
      },
      bankPayModel: {
        transactionId: ""
      }
    };
  },
  created() {
    const id = this.$route.params && this.$route.params.id;
    this.fetchData(id);
  },
  methods: {
    handleWechatPay() {
      var that = this;
      this.$confirm("确认微信转账?", "Warning", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          var data = {
            Id: that.user.id,
            Status: 10,
            PayType: 20
          };
          updateWithdrawStatus(data).then(res => {
            this.$notify({
              title: "成功",
              message: "微信转账成功",
              type: "success",
              duration: 2000
            });
          });
        })
        .catch(err => {
          console.error(err);
        });
    },
    handleBankPay() {
      this.dialogBankPayVisible = true;
      this.transactionId = "";
    },
    handleReject() {
      var that = this;
      var data = {
        Id: that.user.id,
        Status: 20
      };
      updateWithdrawStatus(data).then(res => {
        this.$notify({
          title: "成功",
          message: "驳回成功",
          type: "success",
          duration: 2000
        });
      });
    },
    fetchData(id) {
      drawDetail(id)
        .then(response => {
          this.user = response.data;
        })
        .catch(err => {});
    },
    submitBankPay() {
      var that = this;
      this.$confirm("确认银行转账?", "Warning", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(async () =>{
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            var data = {
              Id: that.user.id,
              Status: 10,
              PayType: 10,
              TransactionId: that.bankPayModel.transactionId
            };
            updateWithdrawStatus(data).then(res => {
              this.$notify({
                title: "成功",
                message: "银行转账信息提交成功",
                type: "success",
                duration: 2000
              });
            });
          }
        })
      });
    }
  }
};
</script>

